<template>
  <div class="panel-main">
    <div class="panel-row">
      <div>文本内容：</div>
      <Input :value="model?.text" class="panel-input" @change="change($event, 'text', 'input')"/>
    </div>
    <div class="panel-row">
      <div>字号：</div>
      <Input :value="model?.fontSize" type="number" class="panel-input" @change="change($event, 'fontSize', 'input')"/>
    </div>
    <div class="panel-row">
      <div>加粗：</div>
      <Input :value="model?.fontWeight" type="number" class="panel-input" @change="change($event, 'fontWeight', 'input')"/>
    </div>
    <div class="panel-row">
      <div>颜色：</div>
      <Input :value="model?.color" class="panel-input" type="color"  @change="change($event, 'color', 'input')" />
    </div>
  </div>
</template>
<script>
import {Input} from "ant-design-vue";

export default {
  name: 'App',
  props: {
    selectedShape: Object
  },

  watch: {
    selectedShape: {
      handler(shape){
        const item = shape.graph.findById(shape.itemId);
        this.model = item.getModel();
      },
      deep: true
    }
  },

  components: {
    Input
  },

  data(){
    return {
      model: {}
    }
  },

  mounted() {
  },

  methods: {
    change(e, key, type){
      switch (type){
        case 'input': this.setValue(e.target.value, key); break;
        case 'checkbox':  this.setValue(e.target.checked, key); break;
        default:
          this.setValue(e.target.value, key);
          break;
      }
      const item = this.selectedShape.graph.findById(this.selectedShape.itemId);
      this.$emit('change', item.getModel());
    },

    setValue(value, key){
      if(key === 'width' || key === 'height'){
        this[key] = value;
      }else{
        this.model[key] = value
      }
    },
  }
}
</script>
<style scoped lang="scss">

</style>